import { Modal } from 'antd'
import React, { PureComponent } from 'react'
import { ProTable } from '@/components'
import styles from './index.less'

export default class PreviewModal extends PureComponent {
  render() {
    const {
      columns, rows, visible, onCancel,
    } = this.props
    return (
      <Modal
        title="数据预览"
        className={styles.preview_modal}
        visible={visible}
        width={1020}
        onCancel={onCancel}
        maskClosable
        onOk={this.onConfirm}
        footer={null}
      >
        {
          (columns || []).length >= 8 ? (
            <ProTable
              columns={
                columns.map((item, index) => (
                  {
                    title: item,
                    dataIndex: index,
                    key: index,
                    ellipsis: true,
                    width: 150,
                  }
                ))
              }
              scroll={{ x: '100vw' }}
              dataSource={rows}
              pagination={false}
            />
          ) : (
            <ProTable
              columns={
                columns.map((item, index) => (
                  {
                    title: item,
                    dataIndex: index,
                    key: index,
                    ellipsis: true,
                  }
                ))
              }
              dataSource={rows}
              pagination={false}
            />
          )
        }
      </Modal>
    )
  }
}
